<!--块元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、表格等。用于创建页面的主要部分，将内容分隔成逻辑块-->
<!--块元素通常从新行开始 并占据整行的宽度，在页面上呈现为一个独立的内容块-->
<!--可以包含其他块级元素和行内元素-->
<!--常见的块元素包括 div p h1到h6 ul ol li table form等-->

<!--行内元素通常在同一行内呈现，不独占一行
    只占据所需要的宽度而不是整行宽度
    行内元素不包括块级元素 但可以包含其他行内元素
    常见的行内元素包括span a strong em img br input等-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="nav"> <!--nav表示导航栏-->
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
    </div>

    <div class="content"> <!--content表示内容类-->
        <h1>爬虫系统</h1>
        <p>文章内容1</p>
        <p>文章内容2</p>
        <p>文章内容3</p>
    </div>

    <span>这是第1个span标签</span> <!--span标签内联样式化文本-->
    <span>这是第2个span标签</span>
    <span>这是第3个span标签</span>
    <span>这是第4个span标签</span>
    <hr>
    <span>链接点击这里 <a href="#">链接</a></span>
</body>

</html>